<template>
	<a-modal :visible="visible" :title="labelInfo.id?'编辑标签':'添加标签'" :confirm-loading="submitLoading" :mask-closable="false" @cancel="handleClose" @ok="handleSubmit">
		<a-form ref="formRef" :model="labelForm" :rules="rules" layout="vertical">
			<a-form-item label="标签名称" name="name">
				<a-input v-model:value="labelForm.name" placeholder="请输入" />
			</a-form-item>
			<a-form-item label="分组名称" name="tag_group_id">
				<a-select style="width: calc(100% - 75px);" :disabled="labelInfo.id?true:false" v-model:value="labelForm.tag_group_id" placeholder="请选择">
					<a-select-option v-for="(item, index) in tagList" :value="item.id">{{item.name}}</a-select-option>
				</a-select>
				<a-button style="width: 75px;" type="primary" @click="createGroup">创建</a-button>
			</a-form-item>
			<a-form-item label="排序" name="sort">
				<a-input-number style="width: 100%;" v-model:value="labelForm.sort" placeholder="请输入" />
			</a-form-item>
		</a-form>
		
		<addGroup :visible="addVisible" :labelInfo="{}" @close="handleAddClose" />
	</a-modal>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		defineComponent,
		watch 
	} from 'vue';
	import request from "@/common/utils/request";
	import {message} from 'ant-design-vue';
	import addGroup from '../../LabelGrouping/modules/addLabel.vue';
	export default defineComponent({
		components: {
			addGroup
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			labelInfo: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		setup(props, context) {
			const formRef = ref()
			const state = reactive({
				tagList: [],
				submitLoading: false,
				labelForm: {
					name: '',
					tag_group_id: null,
					sort: 0,
				},
				rules: {
					name: [{
						required: true,
						message: '请输入',
					}],
					tag_group_id: [{
						required: true,
						message: '请选择',
					}],
					sort: [{
						required: true,
						message: '请输入',
					}]
				},
				addVisible: false
			})

			const handleClose = () => {
				context.emit('close')
				formRef.value.resetFields();
			}

			const handleSubmit = () => {
				formRef.value.validateFields().then(() => {
					state.submitLoading = true
					let method = 'post'
					if(state.labelForm?.id){
						method = 'put'
					}
					request[method]('/work_ai', '/user/shotstack/multimedia/tag', state.labelForm).then(res=> {
						message.success('操作成功！')
						context.emit('close', true)
						state.submitLoading = false
					}).catch(err=> {
						state.submitLoading = false
					})
				});
			}
			
			const getTagList = () => {
				request.get('/work_ai', '/user/shotstack/multimedia/tagGroupSelect').then(res=> {
					state.tagList = res.result.select
				})
			}
			
			const createGroup = () => {
				state.addVisible = true
			}
			
			const handleAddClose = (flag) => {
				state.addVisible = false
				if(flag){
					getTagList()
				}
			}

			watch(() => props.visible, val => {
				if (val) {
					getTagList()
					if(props.labelInfo?.id){
						Object.assign(state.labelForm, props.labelInfo)
					} else {
						state.labelForm = {
							name: '',
							sort: 0,
						}
					}
				}
			})

			return {
				...toRefs(state),
				handleClose,
				handleSubmit,
				formRef,
				createGroup,
				handleAddClose
			}
		}
	})
</script>

<style lang="less" scoped>

</style>